<script setup>
import { useRoute } from 'vue-router'
import { ref } from "vue";
import router from "@/router/index.js";
const route = useRoute()
const price=ref(route.query.price)
const sx=ref(price.value * 0.06)
const fw=ref(route.query.names)
const liquan=ref()
const zifu=ref()

const tan=ref(false)
</script>

<template>
<el-card>
  <p><span>确认订单：</span>{{route.query.names}}总金额{{route.query.price}}</p>

<!--  切割线-->
  <el-divider></el-divider>
 <div>
   <p>选择礼券: <el-select class="el-sel1" v-model="liquan" placeholder="请选择选择礼券">
     <el-option label="无" value="1"></el-option>
     <el-option label="有" value="2"></el-option>
   </el-select></p>

   <br>
   支付方式: <el-select v-model="zifu" class="el-sel1" placeholder="请选择支付方式">
   <el-option label="支付宝[手续费 6%]" value="1"></el-option>
   <el-option label="微信[手续费 6%]" value="2"></el-option>
   <el-option label="银行卡[手续费 6%]" value="3"></el-option>
 </el-select>
   <el-divider></el-divider>
   <el-button type="primary" style="left: 100%" @click="tan=true">支付</el-button><el-button @click="router.push('/home/list')">返回</el-button>
 </div>
  <div v-if="tan" class="mask">
    <el-card style="width: 500px; height: 500px;">
      请确认订单
      <el-divider></el-divider>
      以选服务：<span class="nbsp">{{fw}}</span>
      <el-divider></el-divider>
      订单金额：<span class="nbsp">{{route.query.price}}</span>
      <el-divider></el-divider>
      手续费：<span class="nbsp">{{sx}}</span>
      <el-divider></el-divider>
      总金额：<span class="nbsp">{{prices}}</span>
      <el-divider></el-divider>
      <el-button @click="tan=false" class="qx">取消</el-button>
      <el-button type="primary" @click="tan=false" class="but">继续支付</el-button>
      <p>  </p>
    </el-card>
  </div>
</el-card>
</template>

<style scoped>
.nbsp{
  text-align: right;
}
.el-sel1{
  border:  #E5EAF3;
  width: 500px;
}
.mask{
  display: flex;
  border: 1px;
  /* 创建遮罩层 */
  position: absolute;
  margin: -250px 300px;
}

.but{
  float: right;
}
.qx{
  float: right;
}

@media screen and (max-width: 600px){
  .el-sel1{
    width: 150px;
  }
}

</style>